import {
  createMemo,
  mergeProps,
  splitProps,
  type ParentComponent,
} from "solid-js";
import type { AlertProps } from "./types";

const Alert: ParentComponent<AlertProps> = (props) => {
  const [local, attributes] = splitProps(props, [
    "canClose",
    "variant",
    "ref",
    "$ServerOnly",
    "classList",
    "children",
  ]);

  const classList = createMemo(() => {
    return {
      ...local.classList,
      [`alert-${local.variant}`]: local.variant !== undefined,
      ["alert-dismissible"]: local.canClose,
      ["fade"]: local.canClose,
      ["show"]: local.canClose,
    };
  });

  return (
    <div ref={local.ref} class="alert" classList={classList()} role="alert" {...attributes}>
      {local.children}
      {local.canClose && (
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="alert"
          aria-label="Close"
        ></button>
      )}
    </div>
  );
};

export default Alert
